<template>
  <div class="RankList">
<<<<<<< HEAD
    <div class="box">
      <div class="RankList_boxtop">
        <div class="RankList_top">
          <div class="RankList_top_box">
            <router-link to="/">
              <img
                class="RankList_top_logo"
                src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
                alt
              />
            </router-link>

            <div class="RankList_top_content">排行榜</div>
          </div>
        </div>
      </div>
      <div class="RankList_boxtop1">
        <div class="RankList_bottom">
          <div class="RankList_boxbottom">
            <div class="RankList_bottom_option">
              <router-link to="/">
                <span>首页</span>
              </router-link>
              <span>></span>
              <span>生涯规划</span>
            </div>
            <div class="choose">
              <div class="choose_top">
                <span
                  @click="change(1)"
                  :class="show==1?'choose_top_school':'choose_top_school1'"
                >学校</span>
                <!-- <span @click="change(2)" :class="show==1?'choose_top_major':'choose_top_major1'">专业</span> -->
              </div>
              <div class="choose_bottom" v-if="show==1">
                <div
                  class="choose_bottom_option"
                  @click="likeRankList(index)"
                  v-for="(item,index) in gaoxiao"
                  :key="index"
                >
                  <span class="choose_bottom_option_content">{{item}}</span>
                </div>
              </div>
              <!-- <div class="choose_bottom" v-if="show==2">
=======
    <div class="RankList_boxtop">
      <div class="RankList_top">
        <div class="RankList_top_box">
          <router-link to="/">
            <img
              class="RankList_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="RankList_top_content">排行榜</div>
        </div>
      </div>
    </div>
    <div class="RankList_bottom">
      <div class="RankList_boxbottom">
        <div class="RankList_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>生涯规划</span>
        </div>
        <div class="choose">
          <div class="choose_top">
            <span @click="change(1)" :class="show==1?'choose_top_school':'choose_top_school1'">学校</span>
            <span @click="change(2)" :class="show==1?'choose_top_major':'choose_top_major1'">专业</span>
          </div>
          <div class="choose_bottom" v-if="show==1">
            <div
              class="choose_bottom_option"
              @click="likeRankList(index)"
              v-for="(item,index) in gaoxiao"
              :key="index"
            >
              <span class="choose_bottom_option_content">{{item}}</span>
            </div>
          </div>
          <div class="choose_bottom" v-if="show==2">
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <div class="choose_bottom_option">
              <span class="choose_bottom_option_content">本省理科专业排行榜</span>
            </div>
            <div class="choose_bottom_option">
              <span class="choose_bottom_option_content">本省文科专业排行榜</span>
            </div>
<<<<<<< HEAD
              </div>-->
            </div>
            <div class="content">
              <div class="content_options">
                <div class="content_options_name" v-if="showtitle==0">U.S.News 2019</div>
                <div class="content_options_name" v-if="showtitle==1">QS 2018</div>
                <div class="content_options_name" v-if="showtitle==2">中国校友网2018</div>
                <div class="content_options_name" v-if="showtitle==3">武书连2018</div>
                <div class="content_options_name" v-if="showtitle==4">理科学校排行榜</div>
                <div class="content_options_name" v-if="showtitle==5">文科学校排行榜</div>
                <div class="content_options_select">
                  <div class="content_options_select_one">
                    <el-select v-model="value" v-on:change="selectaddress" placeholder="选择地区">
                      <el-option
                        v-for="(item,index) in newaddressbox"
                        :key="index"
                        :label="item"
                        :value="index"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="content_options_select_two">
                    <el-select v-model="value1" v-on:change="selectSchoolTyoe" placeholder="专业类别">
                      <el-option
                        v-for="item in SchoolType"
                        :key="item.value"
                        :label="item.choose"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="content_content">
                <div v-for="(item,index) in likeRankListbox" :key="index">
                  <div class="school">
                    <img class="choose_bottom_option_img" :src="item.universityEntity.logoUrl" alt />
                    <div class="school_name">{{item.universityEntity.schoolName}}</div>
                    <div class="school_city_box">
                      <span class="school_type">
                        {{item.universityEntity.keyOne}}
                        <span v-if="xiegan==1">/</span>
                        {{item.universityEntity.keyTwo}}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="school1"></div>
              </div>
              <div class="lookmore" @click="page" v-if="totalCount > likeRankListbox.length">查看更多</div>
                <div class="lookmore" v-else>没有更多了</div> 
            </div>
          </div>
        </div>
      </div>
      <!-- <div v-for="(item,index) of addressbox" 
=======
          </div>
        </div>
        <div class="content">
          <div class="content_options">
            <div class="content_options_name" v-if="showtitle==0">U.S.News 2019</div>
            <div class="content_options_name" v-if="showtitle==1">QS 2018</div>
            <div class="content_options_name" v-if="showtitle==2">中国校友网2018</div>
            <div class="content_options_name" v-if="showtitle==3">武书连2018</div>
            <div class="content_options_name" v-if="showtitle==4">理科学校排行榜</div>
            <div class="content_options_name" v-if="showtitle==5">文科学校排行榜</div>
            <div class="content_options_select">
              <div class="content_options_select_one">
                <el-select v-model="value" v-on:change="selectaddress" placeholder="选择地区">
                  <el-option
                    v-for="(item,index) in newaddressbox"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </div>
              <div class="content_options_select_two">
                <el-select v-model="value1" v-on:change="selectSchoolTyoe" placeholder="专业类别">
                  <el-option
                    v-for="item in SchoolType"
                    :key="item.value"
                    :label="item.choose"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="content_content">
            <div v-for="(item,index) in likeRankListbox" :key="index">
              <div class="school">
                <img class="choose_bottom_option_img" :src="item.universityEntity.logoUrl" alt />
                <div class="school_name">{{item.universityEntity.schoolName}}</div>
                <div class="school_city_box">
                  <span class="school_type">
                    {{item.universityEntity.keyOne}}
                    <span v-if="xiegan==1">/</span>
                    {{item.universityEntity.keyTwo}}
                  </span>
                </div>
              </div>
            </div>
            <div class="school1"></div>
          </div>
          <div class="lookmore" @click="page">查看更多</div>
        </div>
      </div>
    </div>
    <!-- <div v-for="(item,index) of addressbox" 
>>>>>>> 314b442cce11d658746227581b0160373004c345
          @click="selectaddress(index)"
          :key="item.id"
          :title="item.title"
          :id="item.id">
          {{item.title}}
<<<<<<< HEAD
      </div>-->
    </div>
=======
    </div>-->
>>>>>>> 314b442cce11d658746227581b0160373004c345
  </div>
</template>
<script>
export default {
  name: "RankList",
  data() {
    return {
<<<<<<< HEAD
      totalCount:'',
      xiegan: 1,
      showtitle: 0,
      gaoxiao: ["U.S.News 2019", "QS 2018", "中国校友网2018", "武书连2018"],
=======
      xiegan: 1,
      showtitle: 0,
      gaoxiao: [
        "U.S.News 2019",
        "QS 2018",
        "中国校友网2018",
        "武书连2018",
        "理科学校排行榜",
        "文科学校排行榜"
      ],
>>>>>>> 314b442cce11d658746227581b0160373004c345
      rank1: 0,
      schooltyoe: "", //学校类别
      Province: "", //省份
      likeRankListbox: "",
      pageSizes: 0,
      pageNows: 0,
      newaddressbox: [],
      addressbox: [],
      show: 1,
      id: "",
      SchoolType: [
        {
          id: "-1",
          choose: "不限"
        },
        {
          id: "0",
          choose: "综合"
        },
        {
          id: "1",
          choose: "工科"
        },
        {
          id: "2",
          choose: "师范"
        },
        {
          id: "3",
          choose: "农业"
        },
        {
          id: "4",
          choose: "医药"
        },
        {
          id: "5",
          choose: "军事"
        },
        {
          id: "6",
          choose: "林业"
        },
        {
          id: "7",
          choose: "语言"
        },
        {
          id: "8",
          choose: "财经"
        },
        {
          id: "9",
          choose: "体育"
        },
        {
          id: "10",
          choose: "艺术"
        },
        {
          id: "11",
          choose: "政法"
        },
        {
          id: "12",
          choose: "民族"
        }
      ],
      value: "",
      value1: ""
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.firstGo();
      this.getaddress(); //获得省份接口
      this.showtitle = 0;
    });
  },
  methods: {
<<<<<<< HEAD
    //页面一刷新进入的页面。
    firstGo() {
=======
    firstGo() {
      //页面一刷新进入的页面。
>>>>>>> 314b442cce11d658746227581b0160373004c345
      let pageNows = this.pageNows;
      this.$ajax({
        method: "post",
        url: "/api/ranking/list",
        data: {
          pageNow: 1,
          pageSize: 9 + pageNows,
          province: this.Province,
          schoolType: this.schooltyoe,
          type: this.rank1
        },
        success: res => {
          if (res.data.code == 0) {
            this.likeRankListbox = res.data.data.list;
<<<<<<< HEAD
            this.totalCount=res.data.data.totalCount
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
            for (var i = 0; i < this.likeRankListbox.length; i++) {
              if (this.likeRankListbox[i].universityEntity.keyOne == "") {
                this.likeRankListbox[i].universityEntity.keyOne = "--";
              }
              if (this.likeRankListbox[i].universityEntity.keyTwo == "") {
                this.likeRankListbox[i].universityEntity.keyTwo = "--";
              }
            }
          } else {
          }
        }
      });
    },
    selectSchoolTyoe(index) {
      //下拉框选择学校类型
      console.log(index);
      this.schooltyoe = index;
      let pageNows = this.pageNows;
      this.$ajax({
        method: "post",
        url: "/api/ranking/list",
        data: {
          pageNow: 1,
          pageSize: 9 + pageNows,
          province: this.Province,
          schoolType: this.schooltyoe,
          type: this.rank1
        },
        success: res => {
          if (res.data.code == 0) {
            this.likeRankListbox = res.data.data.list;
<<<<<<< HEAD
            this.totalCount=res.data.data.totalCount
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
            for (var i = 0; i < this.likeRankListbox.length; i++) {
              if (this.likeRankListbox[i].universityEntity.keyOne == "") {
                this.likeRankListbox[i].universityEntity.keyOne = "--";
              }
              if (this.likeRankListbox[i].universityEntity.keyTwo == "") {
                this.likeRankListbox[i].universityEntity.keyTwo = "--";
              }
            }
          } else {
          }
        }
      });
    },
<<<<<<< HEAD
    //下拉框选择省份
    selectaddress(index) {
=======
    selectaddress(index) {
      //下拉框选择省份
>>>>>>> 314b442cce11d658746227581b0160373004c345
      console.log(index);
      this.Province = index;
      let pageNows = this.pageNows;
      if (this.Province == 0) {
        this.Province = "";
      }
      this.$ajax({
        method: "post",
        url: "/api/ranking/list",
        data: {
          pageNow: 1,
          pageSize: 9 + pageNows,
          province: this.Province,
          schoolType: this.schooltyoe,
          type: this.rank1
        },
        success: res => {
          if (res.data.code == 0) {
            this.likeRankListbox = res.data.data.list;
<<<<<<< HEAD
            this.totalCount=res.data.data.totalCount
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
            for (var i = 0; i < this.likeRankListbox.length; i++) {
              if (this.likeRankListbox[i].universityEntity.keyOne == "") {
                this.likeRankListbox[i].universityEntity.keyOne = "--";
              }
              if (this.likeRankListbox[i].universityEntity.keyTwo == "") {
                this.likeRankListbox[i].universityEntity.keyTwo = "--";
              }
            }
          } else {
          }
        }
      });
    },
    likeRankList(index) {
<<<<<<< HEAD
=======
      // console.log();
>>>>>>> 314b442cce11d658746227581b0160373004c345
      this.showtitle = index;
      this.rank1 = index;
      let pageNows = this.pageNows;
      this.$ajax({
        method: "post",
        url: "/api/ranking/list",
        data: {
          pageNow: 1,
          pageSize: 9 + pageNows,
          province: this.Province,
          schoolType: this.schooltyoe,
          type: index
        },
        success: res => {
          if (res.data.code == 0) {
            this.likeRankListbox = res.data.data.list;
<<<<<<< HEAD
            this.totalCount=res.data.data.totalCount
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
            for (var i = 0; i < this.likeRankListbox.length; i++) {
              if (this.likeRankListbox[i].universityEntity.keyOne == "") {
                this.likeRankListbox[i].universityEntity.keyOne = "--";
              }
              if (this.likeRankListbox[i].universityEntity.keyTwo == "") {
                this.likeRankListbox[i].universityEntity.keyTwo = "--";
              }
            }
          } else {
          }
        }
      });
    },
<<<<<<< HEAD
    //获取省份接口
    getaddress() {
=======
    getaddress() {
      //获取省份接口
>>>>>>> 314b442cce11d658746227581b0160373004c345
      this.$ajax({
        methods: "GET",
        url: "/api/province/queryAll",
        success: res => {
          if (res.data.code == 0) {
            this.addressbox = res.data.data;
            for (var i = 0; i < this.addressbox.length; i++) {
              this.newaddressbox[i] = this.addressbox[i].title;
            }
            console.log(this.newaddressbox);
            this.newaddressbox.unshift("不限");
            //给省份添加一个不限选项。
          }
        }
      });
    },
    page() {
      //点击查看更多
      this.pageNows += 6;
      let pageNows = this.pageNows;

      this.$ajax({
        method: "post",
        url: "/api/ranking/list",
        data: {
          pageNow: 0,
          pageSize: 9 + pageNows,
          province: this.Province,
          schoolType: this.schooltyoe,
          type: this.rank1
        },

        success: res => {
          if (res.data.code == 0) {
            this.likeRankListbox = res.data.data.list;
<<<<<<< HEAD
            this.totalCount=res.data.data.totalCount
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
            for (var i = 0; i < this.likeRankListbox.length; i++) {
              if (this.likeRankListbox[i].universityEntity.keyOne == "") {
                this.likeRankListbox[i].universityEntity.keyOne = "--";
              }
              if (this.likeRankListbox[i].universityEntity.keyTwo == "") {
                this.likeRankListbox[i].universityEntity.keyTwo = "--";
              }
            }
          }
        }
      });
    },
    change(e) {
      console.log(e);
      if (e == "1") {
        this.show = 1;
      } else {
        this.show = 2;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.RankList {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
<<<<<<< HEAD
  .box {
  }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
}
.RankList_boxtop {
  width: 1200px;
  margin: 0 auto;
  height: 68.6px;
}
<<<<<<< HEAD
.RankList_boxtop1 {
  width: 100%;
  margin: 0 auto;
  background-color: #f6f6f6;
}
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
.RankList_top {
  height: 68.6px;
}
.RankList_top_box {
  width: 170.6px;
  height: 68.6px;
}
.RankList_top_logo {
  width: 50px;
  padding-top: 12.5px;
  margin-right: 24px;
}
.RankList_top_content {
  display: inline;
  font-size: 22px;
  color: #515151;
  float: right;
  line-height: 68.6px;
}
.RankList_bottom {
<<<<<<< HEAD
  width: 1200px;
  margin: 0 auto;
=======
  width: 100%;
  background-color: #f6f6f6;
>>>>>>> 314b442cce11d658746227581b0160373004c345
}
.RankList_boxbottom {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.RankList_bottom_option {
  padding-top: 27px;
  padding-bottom: 20px;
}
span {
  color: #757575;
  font-size: 15px;
}
.router-link-active {
  text-decoration: none;
}
.choose {
  width: 240px;
  height: 790px;
  background-color: #ffffff;
  margin-right: 45px;
  float: left;
  border-radius: 10px;
  .choose_top {
    height: 88px;
    background-color: #e6f0ff;
    border-radius: 10px 10px 0 0;
    .choose_top_school {
      display: inline-block;
      margin-top: 46.5px;
      margin-left: 24px;
      margin-right: 36px;
      font-size: 16px;
      color: #2e86ff;
      cursor: default;
    }
    .choose_top_school1 {
      display: inline-block;
      margin-top: 46.5px;
      margin-left: 24px;
      margin-right: 36px;
      font-size: 16px;
      color: #959595;
      cursor: default;
    }
    .choose_top_major {
      display: inline-block;
      margin-top: 46.5px;
      font-size: 16px;
      color: #757575;
      cursor: default;
    }
    .choose_top_major1 {
      display: inline-block;
      margin-top: 46.5px;
      font-size: 16px;
      color: #2e86ff;
      cursor: default;
    }
  }
  .choose_bottom {
    margin-top: 36px;
    margin-left: 24px;
    .choose_bottom_option {
      margin-bottom: 24px;
      cursor: pointer;
      .choose_bottom_option_img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
      .choose_bottom_option_content {
        font-size: 14px;
        color: #757575;
      }
    }
  }
}
.content {
  float: right;
  .content_options {
    width: 915px;
    height: 72px;
    background-color: #ffffff;
    margin-bottom: 24px;
    border-radius: 10px;
    .content_options_name {
      line-height: 72px;
      margin-left: 64px;
      font-size: 16px;
      color: #414141;
      float: left;
    }
    .content_options_select {
      margin-right: 24px;
      float: right;
      .content_options_select_one {
        float: left;
        margin-right: 32px;
        line-height: 72px;
        width: 150px;
      }
      .content_options_select_two {
        float: right;
        line-height: 72px;
        width: 150px;
      }
    }
  }
  .content_content {
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 915px;
    .school1 {
      height: 0px;
      width: 284px;
    }
    .school {
      width: 284px;
      height: 300.5px;
      background-color: #ffffff;
      border-radius: 10px;
      margin-bottom: 32px;
      .choose_bottom_option_img {
        width: 77.5px;
        height: 77.5px;
        margin-top: 50px;
        margin-left: 103.5px;
        margin-bottom: 19px;
      }
      .school_name {
        text-align: center;
        font-size: 16px;
        margin-bottom: 9px;
      }
      .school_city_box {
        text-align: center;
        font-size: 12px;
        color: #757575;
        margin-bottom: 25.5px;
        .school_city {
          margin-right: 14.5px;
        }
      }
      .level {
        text-align: center;
        color: #ff5068;
      }
    }
  }
}
.lookmore {
  display: inline-block;
  margin-top: 36px;
  margin-bottom: 118px;
  margin-left: 440px;
  font-size: 17px;
  color: #959595;
  cursor: pointer;
}
</style>